<template>
    <div>
        <el-form :model="data.commentReportDetail" :rules="rules" ref="examineRef" style="margin: 0 auto;width: 1000px">
            <el-form-item label="举报人" label-width="130px">
                <span>{{ data.commentReportDetail.reportUserNickName }}</span>
            </el-form-item>
            <el-form-item label="被举报人" label-width="130px">
                <span>{{ data.commentReportDetail.reportedUserNickName }}</span>
            </el-form-item>
            <el-form-item label="举报类型" label-width="130px">
                <span>{{ data.commentReportDetail.commentReportTypeName }}</span>
            </el-form-item>
            <el-form-item label="举报原因" label-width="130px">
                <el-input v-model="data.commentReportDetail.reportReason" autocomplete="off" type="textarea"
                          :autosize="{ minRows: 10, maxRows: 10 }"/>
            </el-form-item>
            <el-form-item label="举报时间" label-width="130px">
                <span>{{ data.commentReportDetail.reportTime }}</span>
            </el-form-item>
            <el-form-item label="相关图片" label-width="130px">
                <div class="demo-image" v-for="image in data.commentReportDetail.reportImages" :key="image">
                    <el-image style="width: 100px; height: 100px" :src="image" fit="fit"
                              :preview-src-list="data.commentReportDetail.reportImages"/>
                </div>
            </el-form-item>
            <el-form-item label="是否违规" label-width="130px" prop="status">

                <el-select v-model="data.commentReportDetail.status" class="m-2" placeholder="请选择是否违规"
                           size="large"
                           @change="selectExamineStatus">
                    <el-option
                        v-for="item in examineStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="审核结果" label-width="130px" prop="examineResult">
                <el-input v-model="data.commentReportDetail.examineResult" autocomplete="off" type="textarea"
                          :autosize="{ minRows: 10, maxRows: 10 }"/>
            </el-form-item>
            <el-form-item label-width="130px">
                <el-button @click="submit">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {detail, disposeExistsViolation, disposeNoExistsViolation} from "@/api/commentReport/commentReport";
import {reactive, onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {ElMessage} from "element-plus";

export default {
    setup() {
        const data = reactive({
            commentReportDetail: '',
            existsViolation: '您的反馈已收到，我们已经核实，已对该用户进行相应处罚',
            noExistsViolation: '您的反馈已收到，我们会持续关注，一经核实将进行相应处罚'
        })
        const route = useRoute();
        const router = useRouter();
        const examineStatus = [
            {
                "value": 1,
                "label": "存在违规"
            },
            {
                "value": 2,
                "label": "不存在违规"
            }
        ]
        const examineRef = ref(null)
        const rules = reactive({
            status: [
                {
                    required: true,
                    message: "请选择是否违规",
                    trigger: "blur",
                },
            ],
            examineResult: [
                {
                    required: true,
                    message: "请输入审核结果",
                    trigger: "blur",
                },
            ]
        })
        /**
         * 获取评论举报详情
         */
        const commentReportDetail = () => {
            detail(route.query.uuid).then(res => {
                data.commentReportDetail = res.data
                data.commentReportDetail.status = ''
            })
        }
        /**
         * 选中是否违规
         */
        const selectExamineStatus = (val) => {
            data.commentReportDetail.status = val
            if (val === 1) {
                data.commentReportDetail.examineResult = data.existsViolation
            }
            if (val === 2) {
                data.commentReportDetail.examineResult = data.noExistsViolation
            }
        }
        /**
         * 提交
         */
        const submit = () => {
            examineRef.value.validate((valid) => {
                if (!valid) {
                    return false;
                }
                const param = {
                    examineResult: data.commentReportDetail.examineResult
                }
                if (data.commentReportDetail.status === 1) {
                    // 存在违规
                    disposeExistsViolation(param, route.query.uuid).then(() => {
                        ElMessage({
                            message: '审核成功',
                            type: 'success',
                        })
                    })
                }
                if (data.commentReportDetail.status === 2) {
                    // 不存在违规
                    disposeNoExistsViolation(param, route.query.uuid).then(() => {
                        ElMessage({
                            message: '审核成功',
                            type: 'success',
                        })
                    })
                }
                setTimeout(function () {
                    router.push("/commentReport/list")
                }, 1000)
            })
        }
        onMounted(() => {
            commentReportDetail()
        })
        return {
            data,
            examineStatus,
            rules,
            examineRef,
            selectExamineStatus,
            submit
        }
    }
}
</script>